import React, { Component } from 'react'
// CSSTransition 进行元素过渡，它也是其它过渡形式都要包裹所用的
//   + in： boolean true进场，false出场，此属性只有在CSSTransition独立使用时才必须
//   + key：唯一值，此属性只有CSSTransition和别的过渡组件配合时必须使用
//   + timeout：过渡切换样式名称它的时长 一般要求和动画时长最好一致
//   + classNames：string | object
//     - string 指定过渡动画样式名称的前缀 classNames='aa'  .aa_xxx
//     - object 指定过渡动画每个阶段的具体的样式名称
//   + unmountOnExit 如果为true则在动画离开完成后，删除当前绑定的dom节点
//   + appear 第1次进入到元素或页面是不会有过渡，如果设置了appear为true，则在第1次也会有过渡
//   + 若干个过渡过程的事件 onEnter onExit
// 注：CSSTransition它里能有一个子元素
// 注：如果元素过渡动画中有形变，则一定要设置一下它的块，为inline-block

// TransitionGroup 列表过渡,使用它必须要和CSSTransition一起
// <TransitionGroup><CSSTransition></TransitionGroup>
// 此时CSSTransition组件就需要一个key属性，key是一个唯一的
import { CSSTransition, TransitionGroup } from 'react-transition-group'

class Index extends Component {
  state = {
    todos: []
  }

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState((state) => ({
              todos: [
                ...state.todos,
                { id: Date.now(), value: Date.now() + ' -- @@@@@@' }
              ]
            }))
          }}
        >
          添加任务
        </button>
        <br />
        <ul>
          <TransitionGroup>
            {this.state.todos.map((item) => (
              <CSSTransition
                key={item.id}
                timeout={600}
                unmountOnExit
                classNames="fade"
              >
                <li>
                  <span>{item.value}</span>
                  &nbsp;&nbsp;
                  <button
                    onClick={() => {
                      this.setState((state) => ({
                        todos: state.todos.filter((val) => val.id != item.id)
                      }))
                    }}
                  >
                    删除
                  </button>
                </li>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ul>
      </div>
    )
  }
}

export default Index
